<template>
  <el-dialog
    title="创建会议"
    custom-class="addMeeting-container"
    v-model="d.isVisble"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :rules="d.rules" :model="d.form">
      <el-form-item prop="name" label="会议名:" label-width="90px">
        <el-input v-model="d.form.name" placeholder="请输入会议名"></el-input>
      </el-form-item>
      <el-form-item
        v-if="d.form.type === 0"
        prop="times"
        label="预约时间:"
        label-width="90px"
      >
        <el-date-picker
          style="width: 100%"
          v-model="d.form.times"
          type="datetimerange"
          :disabledDate="disabledDateF"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="会议密码:" label-width="90px" prop="password">
        <el-input
          :type="d.passwordType"
          v-model="d.form.password"
          placeholder="请输入密码(4到6位纯数字)"
        >
          <template #suffix>
            <i
              class="el-input__icon"
              :class="{ 'el-icon-unlock': d.isOpen, 'el-icon-lock': !d.isOpen }"
              @click="openChange"
            ></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="会议设置:" label-width="90px">
        <el-checkbox
          v-model="d.form.isMute"
          label="成员入会时是否静音"
        ></el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
  import { reactive, ref } from 'vue'
  import { useStore } from 'vuex'
  import { addMeeting, find } from '@/api/modules/meeting.js'
  import { ElMessage } from 'element-plus'
  import { greaterThanToday } from '@/utils/timeTools'
  export default {
    props: ['id'],
    emits: ['success'],
    setup(props, context) {
      // icon相关
      const openChange = function () {
        console.log('openChange')
        d.isOpen = !d.isOpen
        d.passwordType = d.isOpen ? '' : 'password'
      }
      // 表单相关
      const formRef = ref(null)
      const onSubmit = function () {
        formRef.value.validate(async (valid) => {
          if (valid) {
            const res = await addMeeting(d.form)
            if (!res) return
            handleClose()
            ElMessage.success('保存成功')
            context.emit('success')
          } else {
            return false
          }
        })
      }
      const handleClose = function () {
        d.isVisble = false
        d.form = form()
      }
      // 初始化
      const rules = function () {
        const valF = function () {
          if (d.form.type === 0 && greaterThanToday(d.form.times[0])) {
            return false
          }
          return true
        }
        return {
          name: [
            { required: true, message: '请输入会议名', trigger: 'blur' },
            { min: 0, max: 10, message: '最多10个位', trigger: 'blur' },
          ],
          password: [
            {
              pattern: /^\d{4,6}$/,
              message: '请输入4到6位纯数字',
              trigger: 'change',
            },
          ],
          times: [
            {
              validator: valF,
              message: '预约时间必须大于当前',
              trigger: 'change',
            },
          ],
        }
      }

      const store = useStore()
      const form = function () {
        return {
          id: 0,
          type: 0,
          name: store.getters.userInfo.doctorName + '的会议',
          times: [],
          password: null,
          isMute: true,
        }
      }
      const d = reactive({
        isVisble: false,
        isOpen: false,
        passwordType: 'password',
        form: form(),
        rules: rules(),
        formRef: null,
      })

      const loadData = async function (id) {
        let res = await find({ meetingId: id })
        d.form.name = res.data.meeting_info_list[0].subject
        d.form.times = [
          res.data.meeting_info_list[0].start_time,
          res.data.meeting_info_list[0].end_time,
        ]
        d.form.password = res.data.meeting_info_list[0].password
        d.form.isMute = res.data.meeting_info_list[0].settings.mute_enable_join
      }
      const init = function (id, type) {
        // 1 快速会议 0 预约会议
        d.form.type = type
        // 存会议id
        d.form.id = id
        d.isVisble = true
        if (d.form.id) loadData(d.form.id)
      }
      return {
        d,
        openChange,
        onSubmit,
        init,
        handleClose,
        formRef,
      }
    },
  }
</script>
<style lang="scss">
  .el-dialog.addMeeting-container {
    width: 500px !important;
    /* .el-checkbox {

    } */
  }
</style>
